<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
		<link rel="stylesheet" href="../js/webuploader/webuploader.css" />
        <script type="text/javascript" src="../js/webuploader/webuploader.js" ></script>
		<title>同城搜添加</title>
		<style>
            input{ background: none; border: 1px solid;}
            input[type=text]{ border-color: #ccc;}
            input[type="button"]{ background: none;}
            p,span{ font-size: 0.8em; color: #999;}
            .top input{ }
            .top{ position: relative; background: #fff; border-bottom: 1px solid #dedede;}
            .top p{ padding-top: 0; text-indent: 0; line-height: 1.5em; color: #888; margin: 0.625em 0; padding: 0 1em;}
            .top span{ margin-top: 1.25em; float: right; text-indent: 1.25em; line-height: 2em; margin-right: 1.25em;}
            .top a{ display: inline-block; text-align: center;  color: #ff3366; padding: 0 1.5em; margin-left: 1.25em; border: 1px solid #ff3366; }
            .top>div{ height: 4.37em; width: 4.3em; border-radius: 50%; position: absolute; top: 0.625em; right: 0.625em;  overflow: hidden;}
            .top>div img{ width: 100%; height: 100%;}
            .top h3{ line-height: 3em; height: 3em; text-indent: 1em; font-size: 1em; color: #666; border-bottom: 1px solid #ccc; margin-bottom: 0.3em;}
            
            
            .main{ background: #fff;}
            .main p{height:5em; overflow:hidden; border-bottom: 1px solid #ccc; text-indent: 0.625em; padding: 1em 0;}
            .main input{ display: inline; width: 60%; margin-bottom: 0;font-size: 1em;line-height: 3em;height:3em;}
            .main i{   font-style: normal; width: 30%; float: left; text-align: right; line-height: 2.5em;}
            
            .main textarea{ width: 60%; margin-bottom: 0;}
            .main input[type=button]{ color:#fff; height:2em;   line-height: normal; background: #ff3366; border: none; width: 40%; position: relative; left: 50%; margin-bottom: 1em;}
            #upload0{ display: none;}
            .main h3{ line-height: 3.125em; height: 2.5em; text-indent: 1em; font-size: 1.2em; color: #666; border-bottom: 1px solid #ccc;}
            .main h3 a{ font-size: 0.8em; color: #ccc; float: right; margin-right: 1em; border: 1px solid #ccc; height: 1.875em; line-height: 1.875em; text-align: center; text-indent: 0; padding: 0 0.375em; border-radius: 0.3125em; margin-top: 0.625em;}
            .main p img{ height: 3em; width: 3em; position: absolute; left: 1.25em;}
            
            @media screen and (max-width: 400px) {
                .main i{ font-size: 0.8em; width: 40%;}
                .main input{ width: 50%;}
                .main textarea{ width: 50%;}
                .top{ height: 8.75em;}
            }
            p.indexquyu{ line-height: 1.5em;text-indent: 0; }
            .indexquyu a{ margin-bottom:1em; margin-right:1em; color:#878787; font-size: 0.8em; display: inline-block; border: 1px solid #ccc; text-indent: 0; padding: 0.1em 0.75em; border-radius:0.3em;}
            .indexquyu a.active{ color: #fff; background: #ff3366; border-color: #ff3366;}
            .main-text{ font-size: 1em;  position: relative;  padding: 1em}
            .main-text p{ padding: 0;}
            .main-text textarea{line-height:1.5em; width: 100%; height: 5em; font-size: 1em; margin-top: 0.5em;}
            .main-text span{position: absolute; top: 1em; right: 1em; line-height: 1.8em; border: 1px solid #ccc; border-radius: 0.2em; padding: 0.1em 0.5em }
            .imghezi{
                width: 100%;
                height: 3em;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            .imghezi img{ height: 3em; margin-right: 0.5em;width: 18%;}
            .webuploader-pick{
                position: absolute;
                top: -2em;
                right: 0em;
                line-height: 1.8em;
                border: 1px solid #ccc;
                border-radius: 0.2em;
                padding: 0em 0.5em;
                font-size: 0.8em;
                color: #999;
                background-color: #fff;
            }
            #filePicker{ float:right; color: #ff3366; padding: 0.2em 0.5em; width: 7em; text-align: center; border-radius: 0.2em; margin-bottom: 0.5em;}
            .main-text>p{ height: 3em;}
            .bottombottom22{
                height: 0.5em;
                background: url(../img/bottombottom2.png) no-repeat;
                background-size: auto 100%;
                width: 1em;
                float: right;
                font-size: 1em;
                margin-top: 1.25em;
            }
        </style>
	</head>

	<body>
		<header>
			<a><span class="leftleft"></span></a>
			<h1>同城搜添加</h1>
		</header>
		<section class="quyu">
			<form action="" method="post" id="upchuan0">
				<div class="top">
					<h3>说明<span class="bottombottom22"></span></h3>
					<p id="htmlStr"></p>
				</div>
				<div class="main">
					<h3>基本信息<a onclick="openUrl('my_card.html?returnUrl=msg', 'my_card');">选择已有名片</a></h3>
					<p><img id="touxiang" src="../img/touxiang.png" /><i>店铺名：</i><input type="text" id="cardName" value="" readonly="readonly"/></p>
					<p><i>主题：</i><input type="text" id="title" name="title" value="" /></p>
					<p>提供服务的区域：当前城市：<span id="region"></span></p>
                    <p class="indexquyu">
                       
                    </p>
                    <div class="main-text">
                        <p>内容</p>
                        <div id="filePicker">上传图片</div>
                        <div class="imghezi">
                            <div id="msg_pic" style="display: flex;">
                                <img style="" src="" data-src=""/>
                                <img style="" src="" data-src=""/>
                                <img style="" src="" data-src=""/>
                                <img style="" src="" data-src=""/>
                                <img style="" src="" data-src=""/>
                            </div>
                        </div>
                        <textarea placeholder="请输入内容" id="remark"></textarea>
                    </div>
					<input class="submit" type="button" id="addMsg" value="发布" />
				</div>
			</form>
		</section>
		

		<footer>
			<nav class="mui-bar mui-bar-tab">
				<a href="javascript:;" id="tcIndex">
                    <img src="../img/shouye2.png" />
                    <span class="mui-tab-label">首页</span>
                </a>
                <a class="action" href="javascript:;" id="myfabu">
                    <img src="../img/fabu2b.png" />
                    <span class="mui-tab-label">发布</span>
                </a>
                <a href="javascript:;" id="myInfo">
                    <img src="../img/mine.png" />
                    <span class="mui-tab-label">我的</span>
                </a>
			</nav>
		</footer>
		<script>
            $(document).ready(function(){
                
                $(".top").click(function(){
                   if($("#htmlStr").css("display") == "none"){
                       $("#htmlStr").show();
                       $(this).find("span").removeClass("rightright");
                       $(this).find("span").addClass("bottombottom22");
                   }else{
                       $("#htmlStr").hide();
                       $(this).find("span").removeClass("bottombottom22");
                       $(this).find("span").addClass("rightright");
                   }
               });
               // 获取模板生成说明
               appcan.ajax({
                    type:"post",
                    async:false,       
                    url:host+"/getSysPByKey.json?pKey=tcssm",
                    data:"",
                    dataType:"json",
                    contentType: "application/json",
                    success : function(dataResult) {
                        $("#htmlStr").html(dataResult.data.pValue);
                    }
                })
                
                //查询 分类
                appcan.ajax({
                    type:"get",
                    url:host+"/getAreaByName.json?cityName="+appcan.locStorage.getVal("ipcity"),
                    dataType:"json",
                    contentType: "application/json",
                    success : function(dataResult) {
                        var actStr = '';
                        // 获取区域数据
                        for(var i=0;i<dataResult.data.length;i++){
                            actStr +='<a>'+dataResult.data[i].cityname+'</a>';
                        }
                        $(".indexquyu").html(actStr);
                        
                        $(".indexquyu a").click(function(){
                           if($(this).hasClass("active")){
                               $(this).removeClass("active");
                           }else{
                               $(".indexquyu a").removeClass("active");
                               $(this).addClass("active");
                           };
                           var ccc = "";
                           for(var i=($(".indexquyu .active").length); i>0; i--){
                               ccc = $(".indexquyu .active").eq(i-1).text() + (ccc.length == 0 ? "" : ("," + ccc));
                               $("#region").text(ccc);
                           };
                        });
                    }
                })
                
                // 初始化Web Uploader
                var uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: '../js/webuploader/Uploader.swf',
                    // 文件接收服务端。
                    server: host+"/image/uploadImg.json?userId="+appcan.locStorage.getVal("userId"),
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#filePicker',
                    duplicate : true,
                    compress :{
                        width: 750,
                        height: 300,
                        // 图片质量，只有type为`image/jpeg`的时候才有效。
                        quality: 90,
                        // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
                        allowMagnify: false,
                        // 是否允许裁剪。
                        crop: false,
                        // 是否保留头部meta信息。
                        preserveHeaders: true,
                        // 如果发现压缩后文件大小比原来还大，则使用原来图片
                        // 此属性可能会影响图片自动纠正功能
                        noCompressIfLarger: false,
                        // 单位字节，如果图片大小小于此值，不会采用压缩。
                        compressSize: 0
                    },
                    // 只允许选择图片文件。
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });
                
                var i = 0;
                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                uploader.on('uploadSuccess', function(file, dataResult) {
                    if(i>4){
                        alert("最大上传五个");
                        return false;
                    }
                    $("#msg_pic img").eq(i).attr("src", hostIp+dataResult.data.imgUrl);
                    $("#msg_pic img").eq(i).attr("data-src", dataResult.data.imgUrl);
                    i++;
                });
                
                uploader.on('uploadError', function(file, reason){
                    if(reason=="F_EXCEED_SIZE"){
                        alert("文件大小不能超过2M");
                    }
                })
                // 文件上传过程中创建进度条实时显示。
                uploader.on( 'uploadProgress', function( file, percentage ) {
                    var percent = (percentage * 100).toFixed(2);
                    if(percent!=100){
                        $(".webuploader-pick").html("正在上传，进度"+percent+"%");
                        $("#filePicker input[name='file']").attr("disabled","disabled");
                    }else{
                        $(".webuploader-pick").html("上传图片");
                        $("#filePicker input[name='file']").removeAttr("disabled");
                    }
                });
                
            });
        </script>
        <script>
            var time = 0;
            var cardId = "";
            var flag = false;
            // JavaScript Document
            $(document).ready(function(){
                var cardId = getVal("cardId");
                if(!!cardId){
                    //获取修改对象
                    appcan.ajax({
                       type:"post",
                       url:host+"/getCard.json?cardId="+cardId,
                       dataType:"json",
                       contentType: "application/json",
                       success : function(dataResult) {
                           var data = dataResult.data; 
                           cardId = data.id;
                            $("#cardName").val(data.cardName);
                            $("#cardRegion").val(data.region);
                            $("#touxiang").attr("src", hostIp + data.picUrl);
                       }
                   })
                }else{//获取默认名片夹
                   appcan.ajax({
                       type:"get",     
                       url:host+"/getCardList.json?userId="+appcan.locStorage.getVal("userId"),
                       dataType:"json",
                       contentType: "application/json",
                       success : function(dataResult) {
                           var data = dataResult.data;
                            if(data.length > 0){
                                cardId = data[0].id;
                                $("#cardName").val(data[0].cardName);
                                $("#cardRegion").val(data[0].region);
                                $("#touxiang").attr("src", hostIp + data[0].picUrl);
                            }
                       }
                   })
                }
                   //最后一发布信息时间
                  appcan.ajax({
                       type:"post",
                       async:false,       
                       url:host+"/getLastMsgTime.json?userId="+appcan.locStorage.getVal("userId"),
                       data:"",
                       dataType:"json",
                       contentType: "application/json",
                       success : function(dataResult) {
                           var intDiff = parseInt(dataResult.data);
                           if(dataResult.data!="" && dataResult.data!=null){
                               if(dataResult.data<3600){
                                   timer(3600-dataResult.data);
                               }else{
                                   flag = true;
                               }
                           }else{
                               flag = true;
                               $(".submit").val("发布");
                           }
                       }
                   })
                   //添加信息
                   $("#addMsg").click(function(){
                        //最后发布1小时内不能提交
                        if(flag){
                            if(!!!$("#title").val()){
                                alert("主题不能为空！");
                                return false;
                            }else if(!!!$("#region").text()){
                                alert("区域内容不能为空");
                                return false;
                            }
                            var msgPics = "";
                            for (var i=0; i < $("#msg_pic img").length; i++) {
                                if($("#msg_pic img").eq(i).attr("data-src").length>0){
                                    msgPics += ((msgPics.length>0 ? "," : "") + $("#msg_pic img").eq(i).attr("data-src"));
                                }
                            };
                            var msg = "添加成功！";
                            if(cardId.length == 0){
                                if(confirm("请先添加名片")){
                                    openUrl("../user/my_card.html","my_card");
                                }
                                 return false;
                            }
                            var baseParam = {'cardId':cardId,"userId":appcan.locStorage.getVal("userId"),
                            "addName":appcan.locStorage.getVal("ipcity"),"region":$("#region").text(),"msgPic":msgPics,"remark":$("#remark").val()}
                            var param = $("#upchuan0").serializeJson(baseParam);
                            appcan.ajax({
                               type:"post",
                               async:false,       
                               url:host+"/saveMsg.json",
                               data:param,
                               dataType:"json",
                               contentType: "application/json",
                               success : function(dataResult) {
                                   if(dataResult.status==1){
                                       alert(msg);
                                       openUrl("my_ask.html","myAsk");
                                   }
                               }
                           })
                        }else{
                            alert("已发布过，一小时内不能再次发布！");
                        }
                    })
            });
            // 时间差倒计时
            function timer(intDiff) {
                var m=0;
                var s=0;
                if(intDiff>0){
                   m=Math.floor(intDiff/60%60);
                   s=Math.floor(intDiff%60);
                   $(".submit").val("发布"+m+":"+s);
                   intDiff--;
                   time = intDiff;
                   setTimeout(function () {
                       timer(intDiff);
                   }, 1000);
                   flag = false;
                }else{
                   flag = true;
                   $(".submit").val("发布");
                }
           }
        </script>
	</body>

</html>